<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--传递的模板内容叫做 插槽内容 未来渲染的时候会使用 插槽内容替换到 插槽出口的位置-->
    <!---->
    <!--<my-button>click</my-button>-->
    <base-layout>
    <!--    header-->
    <!--    template v-slot:name属性的值 -- 指定插槽出口是哪一个-->
    <!--    #header 替换到组件中 <slot name='header'> 的位置-->
        <template #header>
            <p>我是header</p>
        </template>
        <template #default>
            <p>我是default</p>
        </template>
        <template v-slot:footer>
            我是 footer 内容
        </template>
    </base-layout>
</div>
<script src="../../js/vue.js"></script>
<script>
    const MyButton = {
        // <slot></slot>  插槽出口 相当于占了个位置 此标签内部可以定义默认值，当父组件引用时没传递内容 使用默认内容
        template: `
            <button>
                <slot>
                    Submit!
                </slot>
            </button>
        `
    }
    const BaseLayout = {
        template: `
            <div class="container">
              <header>
                <!-- 标题内容放这里 -->
                <slot name="header"></slot>
              </header>
              <main>
                <!-- 主要内容放这里 name=default-->
                <slot></slot>
              </main>
              <footer>
                <!-- 底部内容放这里 -->
                <slot name="footer"></slot>
              </footer>
            </div>
        `
    }
    Vue.createApp({
        components: {
            MyButton,
            BaseLayout
        }
    }).mount("#app")
</script>
</body>
</html>